<template>
  <div v-if="totalPages > 1" class="page">
    <ul class="oh">
      <li v-if="currentPage > 1" class="fl">
        <a :href="makePager(currentPage - 1)">上一页</a>
      </li>
      <li v-for="data in totalPages" :key="data" class="fl ml10">
        <a v-if="data !== currentPage" :href="makePager(data)">{{ data }}</a>
        <span v-else>{{ data }}</span>
      </li>
      <li v-if="currentPage !== totalPages" class="fl ml10">
        <a :href="makePager(currentPage + 1)">下一页</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DefaultPage",
  props: {
    page: {
      type: Object,
      default: () => Object.create(null)
    },
    query: {
      type: Object,
      default: () => Object.create(null)
    }
  },
  computed: {
    currentPage() {
      return parseInt(this.query.p) || this.page.currentPage || 1;
    },
    totalPages() {
      return this.page.totalPages || 0;
    },
    pageSize() {
      return this.page.pageSize || 10;
    },
    count() {
      return this.page.count || 0;
    }
  },
  methods: {
    makePager(p) {
      const options = Object.assign({}, this.query, { p });
      let str = "";
      // eslint-disable-next-line no-unused-vars
      for (const key in options) {
        str += `&${key}=${encodeURIComponent(options[key])}`;
      }
      return "?" + str.substr(1);
    }
  }
};
</script>

<style scoped lang="scss">
a,
span {
  font-size: 14px;
}
</style>
